<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 97vw; height: 97vh"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        const totalData = [

        ];
        // rawData
        // totalData
        const rawData = [
            [
                10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
                7600,
            ],
            [
                6500, 8500, 8500, 8500, 7600, 8500, 8500, 8500, 8500, 8500, 7600,
                8500,
            ],
            [
                500, 2300, 760, 4000, 3000, 2000, 8500, 7600, 5000, 8500, 7600,
                8500,
            ],
            [
                8500, 7500, 7600, 8500, 8500, 7600, 8500, 7600, 8500, 7600, 8500,
                6000,
            ],
        ];
        for (let i = 0; i < rawData[0].length; ++i) {
            let sum = 0;
            for (let j = 0; j < rawData.length; ++j) {
                sum += rawData[j][i];
            }
            totalData.push(sum);
        }
        // 指定图表的配置项和数据
        var option = {
            backgroundColor: "#172238", // 保持深蓝背景
            title: {
                text: "采购实施进度趋势分析（单位：万元）",
                left: "center",
                textStyle: {
                    color: "#E6F7FF",
                    fontSize: 16,
                },
            },
            grid: {
                top: "10%", //距上边距
                left: "6%", //距离左边距
                right: "0%", //距离右边距
                bottom: "6%", //距离下边距
            },
            // 还差一个tootip
            legend: {
                top: 30,
                icon: "rect",
                itemWidth: 10, // 图标宽度
                itemHeight: 10, // 图标高度
                itemGap: 20, // 图例项间距
                textStyle: {
                    color: "#8C9AB3",
                    // 字比左侧图标大即可
                    fontSize: 14,
                    // lineHeight: 10, // 行高与图标高度一致
                    padding: [1, 0, 0, 2], // 上右下左（微调对齐）
                },
                // 新增关键对齐参数
                //  align: "left",
                //   itemStyle: {
                //     verticalAlign: "middle", // 强制垂直居中
                //     borderWidth: 0,
                //   },
            },
            xAxis: {
                type: "category",
                data: [
                    "电网基建",
                    "生产技改",
                    "零星调查",
                    "电网数据中心",
                    "生产模建机改",
                    "电力市场营销",
                    "电网考核",
                    "综合管理",
                    "技术突破",
                    "产业大修",
                    "产业稳建机",
                    "产业辅助技改",
                ],
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                    fontSize: 20,
                    interval: 0,
                },
            },
            yAxis: [
                {
                    //  max: 10550,
                    type: "value",
                    name: "单位(万元)",
                    //   max: 90000,
                    // min: 10,
                    nameTextStyle: {
                        fontSize: "20px",
                        padding: [0, 20, 20, 0],
                        color: "#a2c5eb",
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed", //虚线
                            color: "#276164",
                        },
                        show: true, //隐藏
                    },
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            color: "#a2c5eb",
                            fontSize: 20,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#436488",
                            width: 1, //  改变坐标线的颜色
                        },
                    },
                },
            ],
            series: [
                // 年度计划申报金额（原蓝色柱）
                // {
                //     name: "年度计划申报金额",
                //     type: "line",
                //     smooth: true,
                //     // symbol: "circle",
                //     // symbolSize: 8,
                //     itemStyle: {
                //         normal: {
                //             label: {
                //                 show: false, //开启显示数值
                //                 position: "top", //数值在上方显示
                //                 distance: 30,
                //                 rotate: 60,
                //                 offset: [25, 0],
                //                 textStyle: {
                //                     //数值样式
                //                     color: "#fff", //字体颜色
                //                     fontSize: 14, //字体大小
                //                 },
                //             },
                //         },
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: "#79c1ff" },
                //             { offset: 0.5, color: "#54afff" },
                //             { offset: 1, color: "#2c9dfe" },
                //         ]),
                //     },
                //     data: [
                //         10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
                //         7600,
                //     ],
                // },
                {
                    name: '年度计划申报金额',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#79c1ff" },
                            { offset: 0.5, color: "#54afff" },
                            { offset: 1, color: "#2c9dfe" },
                        ]),
                    },
                    data: [
                        10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
                        7600,
                    ],
                    data1: [
                        10550, 8500, 7500, 760, 890, 7600, 600, 8500, 7600, 5400, 8600,
                        7600,
                    ],
                    barWidth: '50%', // 添加这一行来控制柱子宽度
                    label: {
                        show: true,
                        formatter: (params) => {
                            const seriesIndex = params.seriesIndex;
                            const dataIndex = params.dataIndex;
                            // 使用原始数据而不是归一化后的值
                            return rawData[seriesIndex][dataIndex];
                        }
                    },
                },

                // 综合计划金额（原黄色柱）
                // {
                //     name: "综合计划金额",
                //     type: "line",
                //     smooth: true,
                //     // symbol: "rect",
                //     // symbolSize: 8,
                //     itemStyle: {
                //         // color: "#FFC107",
                //         borderColor: "#fff",
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: "#fdea9c" },
                //             { offset: 0.5, color: "#ffd87d" },
                //             { offset: 1, color: "#fcc261" },
                //         ]),
                //     },
                //     lineStyle: {
                //         width: 3,
                //         type: "solid",
                //         shadowColor: "rgba(255,193,7,0.3)",
                //         shadowBlur: 8,
                //     },

                //     data: [
                //         6500, 8500, 8500, 8500, 7600, 8500, 8500, 8500, 8500, 8500, 7600,
                //         8500,
                //     ],
                // },
                {
                    name: '综合计划金额',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        borderColor: "#fff",
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#fdea9c" },
                            { offset: 0.5, color: "#ffd87d" },
                            { offset: 1, color: "#fcc261" },
                        ]),
                    },
                    data: [
                        6500, 8500, 8500, 8500, 7600, 8500, 8500, 8500, 8500, 8500, 7600,
                        8500,
                    ],
                    barWidth: '50%', // 添加这一行来控制柱子宽度
                    label: {
                        show: true,
                        formatter: (params) => {
                            const seriesIndex = params.seriesIndex;
                            const dataIndex = params.dataIndex;
                            // 使用原始数据而不是归一化后的值
                            return rawData[seriesIndex][dataIndex];
                        }
                    },
                },
                // {
                //     name: "采购金额",
                //     type: "line",
                //     smooth: true,
                //     // symbol: "triangle",
                //     // symbolSize: 10,
                //     itemStyle: {
                //         //  color: "#66BB6A",
                //         borderColor: "#fff",
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: "#2da8a8" },
                //             { offset: 0.5, color: "#45c2cc" },
                //             { offset: 1, color: "#2fefff" },
                //         ]),
                //     },
                //     lineStyle: {
                //         width: 3,
                //         shadowColor: "rgba(102,187,106,0.3)",
                //         shadowBlur: 8,
                //     },
                //     data: [
                //         500, 2300, 760, 4000, 3000, 2000, 8500, 7600, 5000, 8500, 7600,
                //         8500,
                //     ],
                // },
                {
                    name: '采购金额',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        borderColor: "#fff",
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#2da8a8" },
                            { offset: 0.5, color: "#45c2cc" },
                            { offset: 1, color: "#2fefff" },
                        ]),
                    },
                    data: [
                        500, 2300, 760, 4000, 3000, 2000, 8500, 7600, 5000, 8500, 7600,
                        8500,
                    ],
                    barWidth: '50%', // 添加这一行来控制柱子宽度
                    label: {
                        show: true,
                        // formatter: (params) => params.value
                        formatter: (params) => {
                            const seriesIndex = params.seriesIndex;
                            const dataIndex = params.dataIndex;
                            // 使用原始数据而不是归一化后的值
                            return rawData[seriesIndex][dataIndex];
                        }
                    },
                },
                // 执行金额（原青色柱）
                // {
                //     name: "执行金额",
                //     type: "line",
                //     smooth: true,
                //     // symbol: "diamond",
                //     // symbolSize: 10,
                //     itemStyle: {
                //         // color: "#26C6DA",
                //         borderColor: "#fff",
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //             { offset: 0, color: "#b2b7b9" },
                //             { offset: 0.5, color: "#9aa3ab" },
                //             { offset: 1, color: "#83919e" },
                //         ]),
                //     },
                //     lineStyle: {
                //         width: 3,
                //         shadowColor: "rgba(38,198,218,0.5)",
                //         shadowBlur: 10,
                //     },
                //     data: [
                //         8500, 7500, 7600, 8500, 8500, 7600, 8500, 7600, 8500, 7600, 8500,
                //         6000,
                //     ],
                // },
                {
                    name: '执行金额',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        // color: "#26C6DA",
                        borderColor: "#fff",
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgb(146, 95, 222)' },
                            { offset: 0.5, color: 'rgb(183, 151, 235)' },
                            { offset: 1, color: 'rgb(226, 209, 253)' },
                        ]),
                    },
                    data: [
                        8500, 7500, 7600, 8500, 8500, 7600, 8500, 7600, 8500, 7600, 8500,
                        6000,
                    ],
                    barWidth: '50%', // 添加这一行来控制柱子宽度
                    label: {
                        show: true,
                        formatter: (params) => {
                            const seriesIndex = params.seriesIndex;
                            const dataIndex = params.dataIndex;
                            // 使用原始数据而不是归一化后的值
                            return rawData[seriesIndex][dataIndex];
                        }
                    },
                }
                // 采购金额（原绿色柱）
            ].map((name, sid) => {
                return {
                    ...name,
                    data: rawData[sid].map((d, did) =>
                        totalData[did] <= 0 ? 0 : d / totalData[did]
                    ),
                    //  value: 10000
                };
            }),
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
        };
        console.log(option, 'option');
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>